<template>
  <form class="login-form" @submit.prevent="onSubmit">
    <dx-form :form-data="formData" :disabled="loading">
      <dx-item
        data-field="email"
        editor-type="dxTextBox"
        :editor-options="{
          stylingMode: 'filled',
          placeholder: '请输入email',
          mode: 'email',
        }"
      >
        <dx-required-rule message="请输入邮箱" />
        <dx-email-rule message="手机号码无效" />
        <dx-label :visible="false" />
      </dx-item>
      <dx-item
        data-field="密码"
        editor-type="dxTextBox"
        :editor-options="{
          stylingMode: 'filled',
          placeholder: '请输入密码',
          mode: 'password',
        }"
      >
        <dx-required-rule message="请输入密码" />
        <dx-label :visible="false" />
      </dx-item>
      <dx-item
        data-field="rememberMe"
        editor-type="dxCheckBox"
        :editor-options="{
          text: 'Remember me',
          elementAttr: { class: 'form-text' },
        }"
      >
        <dx-label :visible="false" />
      </dx-item>
      <dx-button-item>
        <dx-button-options
          width="100%"
          type="default"
          template="signInTemplate"
          :use-submit-behavior="true"
        >
        </dx-button-options>
      </dx-button-item>
      <dx-item>
        <template #default>
          <div class="link">
            <router-link to="/reset-password">忘记密码?</router-link>
          </div>
        </template>
      </dx-item>
      <dx-button-item>
        <dx-button-options
          text="忘记密码"
          width="100%"
          :on-click="onCreateAccountClick"
        />
      </dx-button-item>
      <template #signInTemplate>+
        <div>
          <span class="dx-button-text">
            <dx-load-indicator
              v-if="loading"
              width="24px"
              height="24px"
              :visible="true"
            />
            <span v-if="!loading">登录</span>
          </span>
        </div>
      </template>
    </dx-form>
  </form>
</template>

<script lang="ts">
import DxLoadIndicator from "devextreme-vue/load-indicator";
import DxForm, {
  DxItem,
  DxEmailRule,
  DxRequiredRule,
  DxLabel,
  DxButtonItem,
  DxButtonOptions,
} from "devextreme-vue/form";
import { Options, Vue } from "vue-class-component";
import { Inject } from "vue-property-decorator";
import { ApiTool } from "../api/api-tool";

    @Options({
        components: {
            DxLoadIndicator,
            DxForm,
            DxEmailRule,
            DxRequiredRule,
            DxItem,
            DxLabel,
            DxButtonItem,
            DxButtonOptions,
        }
    })
    export default class LoginForm extends Vue {
        formData = {
            phone: "",
            password: "",
        };
        loading = false;

        @Inject()
        apiTool: ApiTool;

        onSubmit() {
        }
        onCreateAccountClick() {
            this.$router.push('/create-account');
        }
    }
</script>

<style lang="scss">
@import "@/themes/generated/variables.base.scss";

.login-form {
  .link {
    text-align: center;
    font-size: 16px;
    font-style: normal;

    a {
      text-decoration: none;
    }
  }

  .form-text {
    margin: 10px 0;
    color: rgba($base-text-color, alpha($base-text-color) * 0.7);
  }
}
</style>
